/**
 * 表单相关元素
 *    input
 *    select
 *    radio
 *    checkbox
 *
 *    Vue 中如果需要将表单相关的元素与数据进行绑定，可以使用 v-model 指令
 *
 *    React 中是没有 指令系统的。那么 React 中要如何玩呢？
 */
import React from "react";
import ReactDOM from "react-dom/client";

class App extends React.Component {
  state = {
    username: "李四",
    password: "",
  };

  setUsername = (event) => {
    // console.log(event);

    // 获取输入内容
    const value = event.target.value;
    // 给 state.username 赋值
    this.setState({
      username: value,
    });
  };

  setPassword = (event) => {
    // 取值
    const value = event.target.value;
    // 赋值
    this.setState({
      password: value,
    });
  };

  render() {
    console.log("render");
    return (
      <div>
        <h1>App</h1>
        <div>
          <p>用户名：{this.state.username}</p>
          <button
            onClick={() => {
              this.setState({
                username: "张三",
              });
            }}
          >
            修改用户名
          </button>
        </div>
        <div>
          <p>密码：{this.state.password}</p>
          <button
            onClick={() => {
              this.setState({
                password: "admin",
              });
            }}
          >
            修改密码
          </button>
        </div>

        <form>
          <label>
            <span>用户名</span>
            <input
              type="text"
              value={this.state.username}
              onInput={this.setUsername}
            />
          </label>

          <br />

          <label>
            <span>密码</span>
            <input
              type="password"
              value={this.state.password}
              onInput={this.setPassword}
            />
          </label>
        </form>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
